<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .goodWarmp{
            width: 500px;
            display: flex;
            justify-content:left;
            border: 1px dashed black;
        }
        .goodWarmp>div:last-child{
            text-align: left;
        }
        .detail{
            width: 200px;
            height: 200px;
            background-color: #cccccc;
            position: fixed;
            right: 10px;
            top: 100px;
            border: 2px solid black;
        }
        .goodWarmp img{
            width:100px;
            height:80px;
        }
    </style>
</head>
<body>  
    <!-- 组件之间的通信 非父子组件通信：通过一个Vue实例实现   
        $emit 发布
        $on 监听
    -->
    <div id="app">
        <film-item v-for="item,index in list" :key="item.id" :send-item="item"></film-item>
        <!-- 使用事件分发机制传递数据给父组件 -->
        <detail></detail>
    </div>
    <script>
        const bus = new Vue()
        Vue.component("filmItem",{
            template : `
                <div class="goodWarmp">
                    <div>
                        <img :src="(sendItem.img).split('/w.h').join('')" alt="">
                    </div>
                    <div>
                        <h2>{{ sendItem.nm }}</h2>
                        <p>
                            电影评分：<span>{{ sendItem.sc }}</span>
                        </p>
                        <p>
                            主要演员：<span>{{ sendItem.star }}</span>
                        </p>
                        <p>
                            <button @click="showDetail(sendItem.showInfo,false)">详情</button> 
                        </p>
                    </div>
                </div>
            `,
            props:{
                sendItem:{
                    type: Object,
                    default:[]
                }
            },
            methods: {
                //传递item.showInfo
                showDetail(info,flag){
                    bus.$emit("myevent",{
                        Info:{
                            zl:info,
                            isShow: !flag
                        }
                    });
                }
            }
        })
        Vue.component("detail", {
            template:`
                <div class="detail" v-if="isShow">{{ detail }}</div>
            `,
            mounted(){
                bus.$on("myevent", data => {
                    this.isShow = data.Info.isShow;
                    this.detail = data.Info.zl;
                    // console.log(data.Info);
                })
            },
            data(){
                return {
                    isShow:false,
                    detail:""
                }
            }
        })
        var app = new Vue({
            el: "#app",
            data: {
                list:[],
                info:{}
            },
            mounted(){
                axios("data/data.json").then(res => {
                    this.list = res.data.coming
                })
            },
            // methods: {
            //     getInfo(event){
            //         this.info = event.Info// 拿到fimlCom组件的数据
            //         // console.log(this.info.isShow);
            //     }
            // }
        });
    </script>
</body>
</html>